<template>
  <div class="Music">
    <div id="aplayer"></div>
    <MusicSearch @onSearch="onSearch"/>
    <MusicItem
      v-for="item in songList"
      :key="item.id"
      :item="item"
      @onPlay="onPlay"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import MusicSearch from "../components/MusicSearch.vue"
import MusicItem from "../components/MusicItem.vue"
import axios from "axios"
import { Toast } from 'vant';
import wbb from "../assets/wbb1.jpeg"

import "aplayer/dist/APlayer.min.css"
import APlayer from "aplayer"

// ajax
const songList = ref([])
const onSearch = async (wd) => {
  try {
    Toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0,
      overlay: true
    })
    const res = await axios({
      url: `https://koo-music.vercel.app/search?keywords=${wd}`
    })
    songList.value = res.data.result.songs
    console.log(res.data.result.songs)
  } catch (e) {
    //
  } finally {
    Toast.clear()
  }
}


onMounted(() => {
  const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
      name: '来跳舞',
      artist: '海来阿木',
      url: 'https://webfs.ali.kugou.com/202202281616/ce679a6f08a129ef3122aa617eedb28b/KGTX/CLTX001/0eb96a652fd672b5867c5a2dde6a39a8.mp3',
      cover: wbb
    }]
  });
})

const onPlay = (id) => {
  console.log(id)
  // https://aplayer.js.org/#/zh-Hans/?id=%E5%AE%89%E8%A3%85
  const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
      name: 'name',
      artist: 'artist',
      url: 'url.mp3',
      cover: 'cover.jpg'
    }]
  });
}

</script>
<!--
<script>
import MusicSearch from "../components/MusicSearch.vue"

export default {
  components: {
    MusicSearch
  }
}
</script>-->
